<template>
  <div>
    <div class="emoticon-input">
      <div
        ref="contenteditable"
        @input="onInput"
        contenteditable="true"
        :placeholder="placeholder"
        class="write-contenteditable"
        @paste="optimizePasteEvent"
      ></div>
      <div @mousedown.prevent class="operate">
        <div @mousedown.prevent class="left">
          <div
            @click="execCommand(item)"
            v-for="(item, index) in emoticonLists"
            :key="index"
            class="emoticon-item"
          >
            <img v-lazy-load="item.src" alt="" />
          </div>
        </div>
        <div class="right">
          <el-button @click="$emit('send')" size="mini" type="success" plain
            >发送</el-button
          >
          <!-- <el-dropdown
            @visible-change="($) => $ && (isLoad = true)"
            trigger="click"
          >
            
            <el-dropdown-menu slot="dropdown">
              <div @mousedown.prevent class="emoticon-section">
                <div v-if="isLoad" class="emoticon-list">
                  <div
                    @click="execCommand(item)"
                    v-for="(item, index) in emoticonLists"
                    :key="index"
                    class="emoticon-item"
                  >
                    <img v-lazy-load="item.src" alt="" />
                  </div>
                </div>
                <div class="emoticon-classify">
                  <div
                    v-for="(item, index) in classifyLists"
                    :key="index"
                    @click="switchTab(item, index)"
                    :class="['classify-item', { active: index == curTab }]"
                  >
                    百度
                  </div>
                </div>
              </div>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lazyLoad from "./lazy-load.js";
export default {
  name: "emoticon-input",
  mode: {
    prop: "value",
    event: "input",
  },
  directives: { lazyLoad },
  props: {
    value: {
      default: "",
    },
    placeholder: {
      default: "内个...",
    },
    emoticonClass: {
      default: "",
    },
  },
  data() {
    return {
      emoticonLists: [],
      curTab: 0,
      focus: false,
      isLoad: false,
    };
  },
  mounted() {
    // 调整样式
    document.querySelectorAll(".emoticon-section").forEach((item) => {
      item.parentNode.style.padding = 0;
    });
    if (!this.emoticonLists[0]) this.getSystemImgList();
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        this.$nextTick((_) => {
          let innerHTML = this.$refs.contenteditable.innerHTML;
          if (innerHTML != this.value) {
            this.$refs.contenteditable.innerHTML = this.value;
            this.$emit("input", this.value);
          }
        });
      },
    },
  },
  methods: {
    getSystemImgList() {
      this.$http("getSystemImgList", { type: "minEmoticon" }).then((res) => {
        console.log(res, "res");
        this.emoticonLists = res.data[0] ? res.data[0].systemImg : [];
      });
    },
    onInput(value) {
      this.$emit("input", value.target.innerHTML);
    },
    execCommand(item) {
      this.$refs.contenteditable.focus();

      document.execCommand(
        "insertHTML",
        false,
        `<img src="${item.src}" alt="${item.label}" class='icon-emoticon ${this.emoticonClass}}'>`
      );
    },
    // 监听剪贴板 粘贴去除格式
    optimizePasteEvent(e) {
      e.stopPropagation();
      e.preventDefault();
      let text = "";
      const event = e.originalEvent || e;
      // 获取 剪贴板 格式化后的内容
      if (event.clipboardData && event.clipboardData.getData) {
        text = event.clipboardData.getData("text/plain");
      } else if (window.clipboardData && window.clipboardData.getData) {
        text = window.clipboardData.getData("Text");
      }
      // 插入内容
      if (document.queryCommandSupported("insertText")) {
        document.execCommand("insertHTML", true, text);
        return;
      } else if (document.execCommand) {
        document.execCommand("paste", false, text);
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.emoticon-input {
  border: 1px solid #dcdfe6;
  border-radius: 3px;
}
.write-contenteditable {
  min-height: 50px;
  max-height: 200px;
  line-height: 28px;
  position: relative;
  font-size: 16px;
  outline: none;
  color: #333;
  padding: 8px 8px 0px;
  margin-bottom: 8px;
  overflow: auto;
}

.operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  border-top: 1px solid #dcdfe6;
  .left {
    flex: 1;
    max-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto;
    position: relative;
    overflow: auto;
    .emoticon-item {
      width: 25px;
      height: 25px;
      margin: 7px;
      user-select: none;
      cursor: pointer;
      // background: #f5f5f5;
    }
  }
  .right {
    padding-right: 5px;
  }
}

.emoticon-icon {
  width: 25px;
  height: 25px;
}

.emoticon-section {
  width: 325px;
  overflow: hidden;
  .emoticon-list {
    height: 220px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 5px;
    align-content: flex-start;
    overflow: auto;
    position: relative;
    .emoticon-item {
      width: 25px;
      height: 25px;
      margin: 7px;
      user-select: none;
      cursor: pointer;
      // background: #f5f5f5;
    }
  }
  .emoticon-classify {
    width: 325px;
    // display: flex;
    border-top: 1px solid #f5f5f5;
    cursor: pointer;
    overflow: auto;
    white-space: nowrap;
    .classify-item {
      display: inline-block;
      //   flex: none;
      padding: 10px 15px;
      border-right: 1px solid #f5f5f5;
      &:active {
        background: #f5f5f5;
      }
    }
    .active {
      color: rgb(64, 158, 255);
    }

    &::-webkit-scrollbar {
      height: 5px;
      margin-bottom: 5px;
    }
    &::-webkit-scrollbar-thumb {
      background: #eeeeee;
      margin-bottom: 5px;
    }
  }
}

.emoticon-item:active {
  background: #f5f5f5;
}

.write-contenteditable:empty:before {
  position: absolute;
  left: 8px;
  top: 6px;
  content: attr(placeholder);
  font-size: 16px;
  color: #ccc;
  z-index: 0;
}

::v-deep .icon-emoticon {
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
  margin: 0 2px;
}
</style>
